<template>
  <div class="login">
    <div class="login-title">
      <!-- <div class="login-title-logo"></div> -->
      <div class="login-title-logoimg">
        <img src="@/assets/images/logonew.png" alt="">
      </div>
      <!-- <div class="login-title-logonew">
        航运企业船岸AI智能监控系统
      </div> -->
    </div>
    <div class="login-box">
      <div class="login-box__aside">
        <!-- <div class="login-box__aside-logo"></div>
        <span>欢迎登录</span>
        <span>鲟航-航运综合管理平台</span> -->
      </div>
      <div v-loading="loading" class="login-box__form">
        <div class="login-form">
          <h4>欢迎登录系统</h4>
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <el-form-item prop="username">
              <el-input v-model.trim="loginForm.username" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model.trim="loginForm.password" placeholder="请输入密码" max-length="12" type="password" show-password />
            </el-form-item>
          </el-form>

          <el-button type="primary" class="login-box__form-submit" @click.native.prevent="handleLogin">登 录</el-button>
        </div>
      </div>
    </div>
    <!-- <div class="login-copyright">ihaiking 2021-2024 海金 版权所有 京ICP备0688880号</div> -->
    <!-- <div class="login_wrapper">
      <div class="login_img" />
      <div class="login_content">
        <div class="login_middle">
          <h1 class="login_title">TIM信息化管理系统</h1>
          <div class="login_select">
            <div
              v-for="(item, index) in selectList"
              :key="index"
              :class="[activeIndex == index ? 'actived' : 'defalut']"
            >
              {{ item.title }}
            </div>
          </div>
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
          >
            <div ref="loginBox">
              <el-form-item prop="username" class="login_username">
                <i class="input-icon icon_user" />
                <el-input
                  v-model="loginForm.username"
                  class="login_input"
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item prop="password" class="login_username">
                <i class="icon_password input-icon" />
                <el-input
                  v-model="loginForm.password"
                  placeholder="请输入密码"
                  class="login_input"
                  autocomplete="off"
                  type="password"
                />
              </el-form-item>
              <div class="login_username login_slider" style="height: 54px">
                <SliderCheck
                  :success-fun="handleSuccessFun"
                  :error-fun="handleErrorFun"
                />
              </div>
              <div class="login_remmber" style="height: 50px">
                <div class="login_remmber_name" @click="hdRetrieve">
                  忘记密码
                </div>
                <div class="login_remmber_name">记住密码</div>
              </div>
              <el-form-item style="width: 100%">
                <el-button
                  :loading="loading"
                  size="medium"
                  type="primary"
                  class="login_button"
                  @click.native.prevent="handleLogin"
                >
                  登 录
                </el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
// import { Loading } from "element-ui";
import { createNamespacedHelpers } from 'vuex'
import { sendMessage } from '@/api/index'
const { mapActions } = createNamespacedHelpers('user')
export default {
  name: 'Login',
  data() {
    return {
      codeUrl: '',
      loginForm: {
        username: '',
        password: '',
        sms_code: null,
        // rememberMe: false,
        // code: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入您的手机号' },
          {
            pattern: /^1[3456789][0-9]\d{8}$/,
            message: '手机号格式不正确',
          },
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入您的密码' },
          // {
          //   pattern:
          //     /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z~@#%$&!^?;:'\"<>()]{6,12}$/,
          //   message: "请输入正确格式密码",
          //   trigger: "blur",
          // },
        ],
        sms_code: [{ required: true, trigger: 'blur', message: '请输入手机验证码' }],
      },
      selectList: [
        { id: 1, title: '账密登录' },
        { id: 2, title: '短信登录' },
      ],
      activeIndex: 0,
      loading: false, // 按钮loading
      // 验证码开关
      captchaOnOff: true,
      // 注册开关
      register: false,
      redirect: undefined,
      check: false, // 滑块认证
      countdown: null, // 倒计时
      interval: null,
      messageLoading: false,
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true,
    },
  },
  mounted() {
    // 页面全局监听回车事件进行登录
    document.onkeydown = e => {
      if (e.code === 'Enter') {
        this.handleLogin()
      }
    }
  },
  methods: {
    ...mapActions(['Login']),
    //   忘记密码
    hdRetrieve() {
      this.$router.replace('/retrieve')
    },
    // 滑块验证成功回调
    handleSuccessFun() {
      this.check = true
      // this.login_model.status = true;
    },
    // 滑块验证失败回调
    handleErrorFun() {},
    // 切换登录方式
    handleClickWay(value) {
      this.activeIndex = value
      this.loginForm = {}
      this.countdown = null
    },
    // 发送验证码
    async getMessageCode() {
      this.messageLoading = true
      try {
        if (!this.loginForm.username) {
          this.$message({
            message: '请先输入您的手机号!',
            type: 'warning',
          })
        } else {
          await sendMessage(1, this.loginForm.username)
          this.$message({
            message: '验证码已发送!',
            type: 'success',
          })
          // 接口调用成功开始倒计时
          this.countdown = 60
          this.interval = setInterval(() => {
            this.countdown--
            if (this.countdown === 0) {
              clearInterval(this.interval)
            }
          }, 1000)
        }
        this.messageLoading = false
      } catch (err) {
        this.messageLoading = false
      }
    },
    // 登录
    handleLogin() {
      // if (!this.check) {
      //   this.$message.warning("请先向右滑动验证！");
      //   return;
      // }
      if (this.activeIndex === 0) {
        this.$refs.loginForm.validate(async e => {
          if (e) {
            // const formLoading = Loading.service({
            //   target: this.$refs.loginBox,
            //   text: "登录中",
            // });
            this.loading = true
            try {
              await this.Login(this.loginForm)
              this.$router.push({ path: this.redirect || '/' }).catch(() => {})
              // this.$router.push('/shipping/monitor')
            } catch (err) {
              console.log(err)
            } finally {
              // formLoading.close();
              this.loading = false
            }
          }
        })
      } else {
        this.$refs.messageForm.validate(async e => {
          if (e) {
            this.loading = true
            try {
              await this.Login(this.loginForm)
              this.$router.push({ path: this.redirect || '/' }).catch(() => {})
            } catch (err) {
              console.log(err)
            } finally {
              // formLoading.close();
              this.loading = false
            }
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
// .login ::v-deep .el-input__inner {
//   border: none !important;
//   background: #fff !important;
//   height: 50px;
//   line-height: 50px;
// }
// .login ::v-deep .el-form-item__content {
//   display: flex;
// }

// 覆盖chrome浏览器自动填充后默认样式
.login-form ::v-deep input:-internal-autofill-selected {
  box-shadow: inset 0 0 0 1000px #f6f6f6 !important; // 改变了背景色
  -webkit-text-fill-color: #1676ee; // 改变了字体颜色
}
.login-form ::v-deep input:-webkit-autofill::first-line {
  font-size: 20px !important;
}

.login-form ::v-deep .el-input__inner {
  height: 73px;
  font-size: 20px;
  color: #1676ee;
  padding: 0 44px;
  border: none;
  border-radius: 37px;
  background-color: #f6f6f6;
  @media screen and (max-width: 1440px) {
    height: 55px;
    font-size: 10px;
  }
}
.login-form ::v-deep .el-form-item__content {
  margin-bottom: 20px;
}
.login-form ::v-deep .el-input__icon {
  font-size: 24px;
  line-height: 73px;
  @media screen and (max-width: 1440px) {
    font-size: 12px;
  }
}
.login-form ::v-deep.el-input__suffix {
  right: 12px;
}
.login-form ::v-deep .el-button.is-loading {
  position: absolute;
}
.login-form {
  h4 {
    color: #337ff1;
    text-align: center;
    font-size: 38px;
    font-weight: 500;
    margin: 0 0 80px 0;
  }
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  background-image: url('~@/assets/images/login-bg.png');
  // background-image: url("~@/assets/images/bg.png");
  background-size: cover;
  position: relative;
  &-title{
    position: absolute;
    top: 5%;
    left: 5%;
    display: flex;
    &-logo {
      width: 247px;
      height: 61px;
      background-image: url('~@/assets/images/login-nlogo.png');
      background-size: cover;
    }
    &-logoimg {
      width: 404px;
      height: 63px;
      margin-right: 25px;
      img{
        width: 100%;
      }
    }
    &-logonew {
      color: #ffffff;
      font-size: 30px;
    }
  }
  &-box {
    display: flex;
    align-items: center;
    &__aside {
      width: 552px;
      height: 575px;
      padding: 0 51px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      background-image: url('~@/assets/images/login-part-bg.png');
      background-size: cover;
      border-radius: 21px 0px 0px 21px;
      &-logo {
        width: 55px;
        height: 57px;
        // background-image: url('~@/assets/images/login-logo.png');
        background-size: cover;
      }
    }
    &__aside span {
      margin-top: 24px;
      font-size: 40px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
    &__form {
      width: 697px;
      height: 652px;
      padding: 102px;
      background: #fefeff;
      border: 1px solid #e8e8e8;
      box-shadow: 0px 9px 41px rgba(94, 94, 94, 0.13);
      opacity: 1;
      border-radius: 21px;
      &-mode {
        display: flex;
        margin-bottom: 44px;
        &__item {
          margin-right: 30px;
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          opacity: 1;
          padding-bottom: 3px;
          cursor: pointer;
          &-actived {
            color: #1676ee;
            border-bottom: 2px solid #1676ee;
          }
        }
        &__message {
          position: relative;
          &-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 30px;
            font-size: 18px;
            color: #1676ee;
            background: #f6f6f6;
            z-index: 100;
          }
        }
      }
      &-submit {
        width: 100%;
        height: 72px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        border-radius: 37px;
        box-shadow: 0px 3px 6px 0px rgba(58, 123, 229, 0.5);
      }
    }
  }
  &-copyright {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0px;
    color: #aaaaaa;
    opacity: 1;
    position: absolute;
    text-align: center;
    bottom: 50px;
  }
}
@media screen and (max-width: 1440px) {
  .login {
    &-box {
      &__aside {
        width: 414px;
        height: 431px;
        &-logo {
          width: 41px;
          height: 43px;
        }
      }
      &__aside span {
        font-size: 25px;
      }
      &__form {
        width: 523px;
        height: 489px;
        padding: 74px;
        &-mode {
          &__item {
            font-size: 21px;
          }
          &__message {
            &-btn {
              font-size: 11px;
            }
          }
        }
        &-submit {
          height: 55px;
          font-size: 18px;
        }
      }
    }
    &-copyright {
      font-size: 15px;
    }
  }
}

</style>
